{{- $baseURL := $.Site.BaseURL }}
{{- $dropdownMenuToggle := default true $.Site.Params.topAppBar.dropdownMenuToggle }}
<nav class="top-app-bar shadow navbar navbar-expand-xxl">
  <div class="{{- partialCached "functions/container-class" . .FirstSection -}}">
    {{- if eq .Type "docs" }}
    <button class="navbar-toggler border-0" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasDocsNav"
      aria-expanded="false" aria-label="Toggle docs navigation">
      <i class="fas fa-bars"></i>
    </button>
    {{- end }}
    {{- partial "header/brand" . }}
    <div class="offcanvas-xxl offcanvas-end flex-grow-1" data-bs-scroll="true" tabindex="-1" id="navbarMenus" aria-labelledby="navbarMenusLabel">
      <div class="offcanvas-header px-4 pb-0">
        <div class="offcanvas-title h5" id="navbarMenusLabel">{{- with .Site.Params.brand }}{{ . }}{{ else }}{{ $.Site.Title }}{{ end }}</div>
        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" data-bs-target="#navbarMenus" aria-label="Close"></button>
      </div>
      <div class="offcanvas-body p-4 pt-0 p-xxl-0">
        <hr class="d-xxl-none">
        <ul class="navbar-nav flex-row flex-wrap align-items-center me-auto">
          {{- $currentPage := . }}
          {{- range .Site.Menus.main }}
          {{- $url := .URL | absURL }}
          {{- $active := or (eq $currentPage.Permalink (absURL .URL)) ($currentPage.IsMenuCurrent "main" .) }}
          {{- if .HasChildren }}
          <li class="nav-item col-12 col-xxl-auto dropdown px-0">
            <a href="#"
              class="nav-link{{ if $dropdownMenuToggle }} dropdown-toggle{{ end }}{{ if $currentPage.HasMenuCurrent "main" . }} active{{ end }}"
              id="navbarDropdown{{ title .Identifier }}" role="button" data-bs-toggle="dropdown" aria-expanded="false">
              {{- partial "helpers/menu-name" . }}
            </a>
            <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdown{{ title .Identifier }}" data-bs-popper="none">
              {{- with .Params.description }}
                <li><h6 class="dropdown-header">{{ . }}</h6></li>
              {{- end }}
              {{- range .Children }}
              {{- $childURL := .URL | absURL }}
              {{- if .Params.divider }}
              <li><hr class="dropdown-divider"></li>
              {{- else }}
              <li>
                <a class="dropdown-item d-flex align-items-center text-wrap text-xxl-nowrap{{ if or (eq $currentPage.Permalink (absURL .URL)) ($currentPage.IsMenuCurrent "main" .) }} active{{ end }}"
                  href="{{ $childURL }}"{{ if not (hasPrefix $childURL $baseURL) }} target="_blank" rel="noopener noreferrer"{{ end }}>
                  {{- .Pre -}}
                  {{- with .Params.icon }}
                    <span class="dropdown-item-icon me-2 p-2 rounded">
                      {{ . | safeHTML }}
                    </span>
                  {{- end }}
                  <div class="dropdown-item-content">
                    <p class="dropdown-item-title {{ if .Params.description }}mb-1{{ else }}mb-0{{ end }}">{{- .Name -}}</p>
                    {{- with .Params.description }}
                      <p class="dropdown-item-description mb-0 text-secondary">
                        {{- . -}}
                      </p>
                    {{- end }}
                  </div>
                  {{- .Post -}}
                </a>
              </li>
              {{- end }}
              {{- end }}
            </ul>
          </li>
          {{- else -}}
          <li class="nav-item col-6 col-xxl-auto">
            <a class="nav-link py-2 px-0 px-xxl-2{{ if $active }} active{{ end }}" href="{{ $url }}"{{ if not (hasPrefix $url $baseURL) }} target="_blank" rel="noopener noreferrer"{{ end }}>
              {{- partial "helpers/menu-name" . }}
            </a>
          </li>
          {{- end }}
          {{- end }}
        </ul>
        {{ partial "header/search-bar" . }}
        {{- if or (default true .Site.Params.topAppBar.colorToggle) (isset $.Site.Params "fontsize") ( gt (len $.Site.Home.AllTranslations) 1) (.Site.Params.Palettes) (.Site.Params.topAppBar.social) -}}
        <hr class="d-xxl-none">
        <ul class="navbar-nav flex-row flex-wrap align-items-center ms-md-auto">
          {{- partial "header/social-links" . }}
          {{- partialCached "header/languages" . }}
          {{- partialCached "header/font-size" . }}
          {{- partialCached "header/palettes" . }}
          {{- partialCached "header/theme" . }}
        </ul>
        {{- end }}
      </div>
    </div>
    <div class="d-flex">
      <button class="navbar-toggler order-5 border-0" type="button" data-bs-toggle="offcanvas" data-bs-target="#navbarMenus"
        aria-controls="navbarMenus" aria-expanded="false" aria-label="Toggle navigation">
        <i class="fas fa-ellipsis-h"></i>
      </button>
      {{- partial "header/search-button" . }}
    </div>
  </div>
</nav>
